<template>
  <div>
    <!-- 单一根，指令才能生效，必须 v-modaldrag --->
    <el-form :model="project" ref="projectForm" :rules="rules" :label-width="100" size="medium">
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="项目简称" prop="name"><el-input v-model="project.name"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="项目编码" prop="code"><el-input v-model="project.code"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
   
        <el-col :span="24">
          <el-form-item label="项目全称" prop="fullName"><el-input v-model="project.fullName"  /></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="项目地点" prop="address"><el-input v-model="project.address"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="经度" prop="lng"><dayu-number-input v-model="project.lng" :style="{width:elWidth1}"  ></dayu-number-input></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="纬度" prop="lat"><dayu-number-input v-model="project.lat" :style="{width:elWidth1}"  ></dayu-number-input></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="项目类型" prop="projectKind"><el-select v-model="project.projectKind" :clearable="true" :style="{width:elWidth1}"><el-option v-for="item in projectKindItems" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="所在行政区" prop="districtCode"><el-select v-model="project.districtCode" :clearable="true" :style="{width:elWidth1}"><el-option v-for="item in districtCodeItems" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="项目经理" prop="projectManager"><dayu-integer-input v-model="project.projectManager" :style="{width:elWidth1}"  > </dayu-integer-input></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="立项日期" prop="initialDate"><dayu-date-picker v-model="project.initialDate" :style="{width:elWidth1}" /></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="中标日期" prop="bidDate"><dayu-date-picker v-model="project.bidDate" :style="{width:elWidth1}" /></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="合同金额" prop="contractAmount"><dayu-number-input v-model="project.contractAmount" :style="{width:elWidth1}"  ><template #suffix>元</template></dayu-number-input></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="项目周期" prop="projectMonths"><dayu-integer-input v-model="project.projectMonths" :style="{width:elWidth1}"  > <template #suffix>月</template></dayu-integer-input></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="项目建设内容" prop="projectContent"><el-input type="textarea" v-model="project.projectContent" :rows="3" /></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="项目状态" prop="projectStatus"><el-select v-model="project.projectStatus" :clearable="true" :style="{width:elWidth1}"><el-option v-for="item in projectStatusItems" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="项目评分" prop="projectScore"><dayu-integer-input v-model="project.projectScore" :style="{width:elWidth1}"  > </dayu-integer-input></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="业主单位" prop="projectOwner"><el-input v-model="project.projectOwner"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="linkMan"><el-input v-model="project.linkMan"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="linkPhone"><el-input v-model="project.linkPhone"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="是否中止" prop="abort"><el-checkbox v-model="project.abort"></el-checkbox></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="顺序号" prop="ordnum"><dayu-integer-input v-model="project.ordnum" :style="{width:elWidth1}"  > </dayu-integer-input></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
   
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks"><el-input type="textarea" v-model="project.remarks" :rows="3" /></el-form-item></el-col>

      </el-row>
    </el-form>


  </div>
</template>

<script lang="ts" setup>
/*
 * @author: user
 * @date: 2021-11-24 14:45:24
 * @template: dayu-code-builder
*/
import { ref, reactive, computed, onMounted } from 'vue'
import { Project, projectService } from '@/api/demo/ProjectService'
import { IForm, formColGutter } from '@/common/FormModal'
import { myutil, EntityBO } from '@/common/dayu-common'

const props = defineProps({
  id: Number,
});

/** form两列之间的间距 */
const formGutter = formColGutter;
const elWidth1 = '270px';
/** 接口数据（和接口返回数据对应） */
const projectData = reactive({project:<Project>{}, codeTypes:{}, nameTypes:{}});
/** 表单数据 */
const project = computed(() => projectData.project);

/** 下拉列表数据 */
const projectKindItems = computed(() => myutil.codeItems2ElOptions(projectData.codeTypes["projectKind"]));
const districtCodeItems = computed(() => myutil.codeItems2ElOptions(projectData.codeTypes["districtCode"]));
const projectStatusItems = computed(() => myutil.codeItems2ElOptions(projectData.codeTypes["projectStatus"]));

/** 表单验证 */
const rules = {
  name: [{ required: true, message: '项目简称是必填项', trigger: 'blur' }],
}
/** 用于记录Form表单的原始数据。在提交数据时进行对比，如果没有发生变化，则不执行实际的提交。 */
let originFormData = '';

/** 表单vue组件对象 */
const projectForm = ref();

/** 获取表单数据 */
async function getFormData() {
  try {
    let response: any = await projectService.getProjectBO(props.id as number);
    let projectBO = response.data as EntityBO;
    projectData.project = projectBO.data || {};
    projectData.codeTypes = projectBO.codeTypes;
    projectData.nameTypes = projectBO.nameTypes;
  } catch (ex: any) {
    console.error("await error");
    console.error(ex);
  }
}

/** 提交表单数据（这个函数是给引用表单的组件调用的，函数名是固定的，不能修改） */
async function submitFormData() {//函数名固定为submitFormData，FormModal.submit内会按此函数名执行调用
  let newFormData = JSON.stringify(projectData.project);

  //和表单原始数据时进行对比，如果没有发生变化，则不执行实际的提交。
  if (originFormData === newFormData) {
    console.log("数据没有改动，无需保存，操作已取消");
    return Promise.resolve();
  }
  try {
    await projectForm.value.validate(); //表单验证
  } catch {
    return Promise.reject('validateError');//表单验证出错
  }
  try {
    let response = await projectService.saveProject(projectData.project); //提交数据到后端服务进行保存
    return Promise.resolve(response);
  } catch (err: any) {
    return Promise.reject(err);//表单验证出错
  }
}

onMounted(() => {
  getFormData();
});

defineExpose({ submitFormData } as IForm);

</script>

<style scoped>
</style>